<div class="layuimini-container layui-anim layui-anim-upbit">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" id="form">
                    <div class="layui-form-item">


                        <div class="layui-inline" id="word">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="searchValue" placeholder="请输入用户名" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">选择日期</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="startTime" id="date1" autocomplete="off" class="layui-input">
                            </div>
                            <label style="float: left;padding-top: 4px;padding-right: 4px;">_&nbsp;&nbsp;</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="endTime" id="date2" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn"
                                    style="width:90px;height:38px;border:none;outline:none;border-radius:6px;background-color:#007bff;color:white"><i
                                    class="layui-icon"></i> 搜 索</button>

                            <!-- <button type="submit" lay-submit="" class="layui-btn layui-btn-warm"
                                lay-filter="data-export-btn"
                                style="width:90px;border-radius:6px;background-color:#26B99A;">
                                <i class="layui-icon"></i> 导 出</button> -->
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <br>
        <div id="table" lay-filter="currentTableFilter">

        </div>
        <div id="page"></div>
    </div>
</div>





<script>

    layui.form.render();

    var date1 = new Date(),
        date2 = new Date(date1);
    //-30为30天前，+30可以获得30天后的日期
    date2.setDate(date1.getDate() - 30);
    month = date1.getMonth() + 1
    date = date1.getDate()
    if (month < 10) {
        month = "0" + month;
    }
    if (date < 10) {
        date = "0" + date;
    }
    nowDay = date1.getFullYear() + "-" + month + "-" + date
    month = date2.getMonth() + 1
    date = date2.getDate()
    if (month < 10) {
        month = "0" + month;
    }
    if (date < 10) {
        date = "0" + date;
    }
    agoDay = date2.getFullYear() + "-" + month + "-" + date
    //form表单
    // layui.form.render();

    //开始日期
    var today = new Date();
    var start = layui.laydate.render({
        elem: '#date1',
        calendar: true,
        trigger: 'click',
        max: $("#date2").val(),
        istime: true,
        istoday: true,
        value: agoDay,
        done: function (value, date, endDate) {
            if (value != "") {
                end.config.min = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date
                }
            } else {//清空以后最小值
                end.config.min = {
                    year: 1970,
                    month: 1,
                    date: 1
                }
            }
        }
    });

    //结束日期
    var end = layui.laydate.render({
        elem: '#date2',
        calendar: true,
        trigger: 'click',
        max: $("#date2").val(),
        istime: true,
        istoday: true,
        value: nowDay,
        done: function (value, date) {
            if (value != "") {
                start.config.max = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date
                }
            } else {//清空以后最大值
                start.config.max = {
                    year: today.getFullYear(),
                    month: today.getMonth(),
                    date: today.getDate()
                }
            }
        }
    });



    var tableBar = [
        { title: '序 号', type: 'numbers',width: '10%', align: "center" },
        { field: 'userId', title: '用  户 ID', width: '20%', align: "center" },
        { field: 'userName', title: '姓 名', width: '20%', align: "center" },
        { field: 'ip', title: 'IP 地 址',width: '20%',   align: "center" },
        { field: 'createTime', title: '登 录 时 间', width: '30%', align: "center" }
    ]

    var initTableParams = {
        "searchValue": "",
        "startTime":$("#date1").val(),
        "endTime":$("#date2").val(),
        "page": 1,
        "pageSize": 10
    }


    //封装 表格渲染方法
    function tableRender(tableBar, initTableParams) {
        layuiEx.tableRender(
            "/adminLog/LoginLogList",
            'table',
            'page',
            tableBar,
            initTableParams
        );
    }

    tableRender(tableBar, initTableParams)

    //检索事件
    layui.form.on('submit(data-search-btn)', function (params) {

        layuiEx.tableRender(
            "/adminLog/LoginLogList",
            'table',
            'page',
            tableBar,
            {
                "searchValue": params.field.searchValue,
                "startTime":$("#date1").val(),
                "endTime":$("#date2").val(),
                "page": 1,
                "pageSize": 10
            }
        );
        return false
    })








</script>